<template>
  <el-button
    size="small"
    @click="closeContrib"
    :disabled="closeDisabled"
    :loading="loading"
  >
    关闭贡献
  </el-button>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
  name: 'close-button',
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    ...mapState({
      curContrib: 'currentContribution',
    }),
    ...mapGetters(['isSpaceOwner', 'isSpaceAdmin']),
    // 禁止采纳
    closeDisabled() {
      return !(this.isSpaceOwner || this.isSpaceAdmin) // 不是管理员
        || this.curContrib.closed // 已被关闭
        || this.curContrib.accepted; // 已被接受
    },
  },
  methods: {
    // 关闭贡献
    closeContrib() {
      this.loading = true;
      this.$api.spaceContributions.close({
        spaceId: this.$route.params.spaceId,
        contribId: this.curContrib.id,
      }).then(() => {
        this.$message.success('已关闭贡献');
        this.$emit('closed');
        this.$root.$emit('loadSidebarItemsCount');
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
